<template>
	<view style="height: 100vh;background-color: #000;">

	</view>
</template>

<script>
	let barcode = null; // 记录创建的窗口
	export default {
		data() {
			return {
				currentWebview: '',
			}
		},
		onLoad() {
			this.initView() // 创建初始化扫码页面
		},
		methods: {
			initView() {
				// #ifdef APP-PLUS
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				plus.navigator.setFullscreen(true); //全屏
				let currentWebview = page.$getAppWebview();
				this.currentWebview = currentWebview
				this.createBarcode(currentWebview); //创建二维码窗口
				this.createView(currentWebview); //创建操作按钮及tips界面
				// #endif
			},
			// 扫码成功回调
			async onmarked(type, result) {
				var text = '未知: ';
				switch (type) {
					case plus.barcode.QR:
						text = 'QR: ';
						break;

				}
				console.log('result', text, result);
			},
			// 创建二维码窗口
			createBarcode(currentWebview) {
				barcode = plus.barcode.create("barcode", [plus.barcode.QR], {
					// 扫码区域样式
					top: '0',
					left: '0',
					width: '100%',
					height: '100%',
					scanbarColor: '#f1f1f1',
					position: 'static',
					frameColor: '#f1f1f1',
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center'
				})
				// 扫码事件回调
				barcode.onmarked = this.onmarked;
				barcode.setFlash(false); // 不打开摄像头
				currentWebview.append(barcode);
				barcode.start();
			},
			// 创建操作区域及tips
			createView(currentWebview) {
				// 创建原生返回按钮
				let backVew = new plus.nativeObj.View('backVew', {
					top: '40px',
					left: '20px',
					width: '35px',
					height: '35px'
				}, [{

					tag: 'img',
					id: 'backBar',
					src: '/static/icon/back.png', // 根据自己的图标修改下面的样式
					position: {
						top: '0px',
						left: '0px',
						width: '35px',
						height: '35px'
					}
				}])
				backVew.interceptTouchEvent(true);
				currentWebview.append(backVew);
				backVew.addEventListener("click", function(e) { //返回按钮

					console.log('触发了');
					uni.navigateBack({
						delta: 1
					});
					barcode.close();
					plus.navigator.setFullscreen(false);
				}, false);

				// 创建相册按钮
				let albumView = new plus.nativeObj.View('selectedImage', {
					bottom: "40px",
					left: '83%', // 调整右边距
					width: '45px',
					height: '45px'
				}, [{
					tag: 'img',
					id: 'backBar',
					src: '/static/icon/album.png', // 根据自己的图标修改下面的样式
					position: {
						bottom: '0px',
						left: '0px', // 调整右边距
						width: '45px',
						height: '45px'
					}
				}])
				currentWebview.append(albumView);
				albumView.addEventListener("click", function(e) {
					// 打开相册选择图片
					plus.gallery.pick(function(path) {
						// 选择图片成功后的回调函数
						console.log('选择的图片路径：' + path);
						// 使用扫描功能扫描选择的图片
						plus.barcode.scan(path, function(type, result) {
							// 扫描成功后的回调函数
							console.log('扫描结果：' + result);
							// 在这里可以处理扫描结果
						}, function(error) {
							// 扫描失败后的回调函数
							console.log('扫描失败：' + error.message);
						});
					}, function(e) {
						// 选择图片失败后的回调函数
						console.log('选择图片失败：' + e.message);
					});
				}, false);

				// 创建展示类内容组件
				let content = new plus.nativeObj.View('content', {
						bottom: '23%',
						left: '0px',
						height: '125px',
						width: '100%'
					},
					[{
						tag: 'font',
						id: 'scanTips',
						text: '请打开贵公司储能管家网页端，扫描“公司标识二维码”',
						textStyles: {
							size: '14px',
							color: '#ffffff',
							whiteSpace: 'normal'
						},
						position: {
							bottom: '60px',
							left: '5%',
							width: '90%',
							height: 'wrap_content'
						}
					}, ]);
				currentWebview.append(content);
			}
		}
	}
</script>